<template>
  <el-table
    :data="dataList"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand" :model="dataForm" ref="dataForm">
          <el-form-item label="收件人邮箱：">
            <el-input
                placeholder="请输入邮箱"
                v-model="props.row.email"
                disabled=true>
            </el-input>
          </el-form-item>
          <el-form-item label="内容：" show-overflow-tooltip=true>
            <el-input
                placeholder="请输入回复内容"
                v-model="dataForm.content">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('dataForm', props.row)">发送</el-button>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      prop="leavtime"
      label="日期时间">
    </el-table-column>
    <el-table-column
      prop="id"
      label="Id">
    </el-table-column>
    <el-table-column
      prop="userName"
      label="用户名称">
    </el-table-column>
    <el-table-column
      prop="content"
      label="内容">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱">
    </el-table-column>
    <el-table-column
      label="操作">
      <template slot-scope="scope">
        <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">回复</el-button> -->
        <el-button type="text" size="small" @click.native.prevent="deleteRow(scope.$index, dataList)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { getLeavList, sendMail } from '../../api/Leav'
  export default {
    data() {
      return {
        dataList: [],
        dataForm: {
            to: '',
            subject: '',
            upContent: '',
            content: ''
        }
      }
    },
    created(){
        this.getLeav()
    },
    mounted(){
    },
    methods: {
        handleClick(row) {
            console.log(row);
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        getLeav(){
            getLeavList().then(res => {
                if(res.code == 200){
                    this.$message({message: '留言获取成功',type: 'success'})
                    this.dataList = res.data
                }
                
            })
        },
        submitForm:function(formName, row){
            this.$refs[formName].validate((valid) => {
                if(valid){
                    console.log('提交了表单：',this.dataForm)
                    console.log("点击行内容：",row.content)
                    this.dataForm.upContent = row.content
                    this.dataForm.to = row.email
                    this.dataForm.subject = row.userName
                    sendMail(this.dataForm).then(res => {
                        if(res.code == 200){
                            this.$message({message: res.message, type: 'success'})
                        }else{
                            this.$message({message: res.message, type: 'error'})
                        }

                    })
                }
                
            })
        }
    }
  }
</script>